<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>IconHover简单的鼠标悬停效果</title>
		<meta name="description" content="Simple Icon Hover Effects with CSS Transitions and Animations" />
		<meta name="keywords" content="icons, hover, round, circular, transition, animation, css3" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico"> 
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
	
	</head>
	<body>
    	
		<div class="container" id="set-1">
			<h1 class="title">Icon Hover Effects <span>简单的鼠标悬停效果</span></h1>
            	<!--S 第一屏icon效果-->
				<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
					<a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#" class="hi-icon hi-icon-support">Support</a>
					<a href="#" class="hi-icon hi-icon-locked">Security</a>
				</div>
                <!--E 第一屏icon效果-->
                
                <!--S 第二屏icon效果-->
                <div class="hi-icon-wrap hi-icon-effect-2 hi-icon-effect-2a">
					<a href="#" class="hi-icon hi-icon-cog">Settings</a>
					<a href="#" class="hi-icon hi-icon-clock">Time</a>
					<a href="#" class="hi-icon hi-icon-videos">Videos</a>
					<a href="#" class="hi-icon hi-icon-list">List</a>
					<a href="#" class="hi-icon hi-icon-refresh">Refresh</a>
				</div>
                <!--E 第二屏icon效果-->
                
                <!--S 第三屏icon效果-->
				<div class="hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3a">
					<a href="#" class="hi-icon hi-icon-images">Images</a>
					<a href="#" class="hi-icon hi-icon-pencil">Edit</a>
					<a href="#" class="hi-icon hi-icon-link">Link</a>
					<a href="#" class="hi-icon hi-icon-mail">Mail</a>
					<a href="#" class="hi-icon hi-icon-location">Location</a>
				</div>
            	<!--E 第三屏icon效果-->
                
                <!--S 第四屏icon效果-->
				<div class="hi-icon-wrap hi-icon-effect-4 hi-icon-effect-4a">
					<a href="#" class="hi-icon hi-icon-archive">Archive</a>
					<a href="#" class="hi-icon hi-icon-chat">Chat</a>
					<a href="#" class="hi-icon hi-icon-bookmark">Bookmarks</a>
					<a href="#" class="hi-icon hi-icon-user">User</a>
					<a href="#" class="hi-icon hi-icon-contract">Contact</a>
				</div>
           		<!--E 第四屏icon效果-->
                
                <!--S 第五屏icon效果-->
				<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
					<a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
					<a href="#" class="hi-icon hi-icon-screen">Desktop</a>
					<a href="#" class="hi-icon hi-icon-earth">Partners</a>
					<a href="#" class="hi-icon hi-icon-support">Support</a>
					<a href="#" class="hi-icon hi-icon-locked">Security</a>
				</div>
            	<!--E 第五屏icon效果-->
                
                <!--S 第六屏icon效果-->
				<div class="hi-icon-wrap hi-icon-effect-6">
					<a href="#" class="hi-icon hi-icon-cog">Settings</a>
					<a href="#" class="hi-icon hi-icon-support">Support</a>
					<a href="#" class="hi-icon hi-icon-star">Fav</a>
					<a href="#" class="hi-icon hi-icon-contract">Contract</a>
					<a href="#" class="hi-icon hi-icon-refresh">Refresh</a>
				</div>
           		<!--E 第六屏icon效果-->
                
                <!--S 第七屏icon效果-->
				<div class="hi-icon-wrap hi-icon-effect-7 hi-icon-effect-7a">
					<a href="#" class="hi-icon hi-icon-cog">Settings</a>
					<a href="#" class="hi-icon hi-icon-clock">Time</a>
					<a href="#" class="hi-icon hi-icon-videos">Videos</a>
					<a href="#" class="hi-icon hi-icon-list">List</a>
					<a href="#" class="hi-icon hi-icon-refresh">Refresh</a>
				</div>
           		<!--E 第七屏icon效果-->
                
                <!--S 第八屏icon效果-->
				<div class="hi-icon-wrap hi-icon-effect-8">
					<a href="#" class="hi-icon hi-icon-archive">Archive</a>
					<a href="#" class="hi-icon hi-icon-chat">Chat</a>
					<a href="#" class="hi-icon hi-icon-bookmark">Bookmarks</a>
					<a href="#" class="hi-icon hi-icon-user">User</a>
					<a href="#" class="hi-icon hi-icon-contract">Contact</a>
				</div>
            	<!--E 第八屏icon效果-->
                
                <!--S 第九屏icon效果-->
                <div class="hi-icon-wrap hi-icon-effect-9 hi-icon-effect-9a">
					<a href="#" class="hi-icon hi-icon-images">Images</a>
					<a href="#" class="hi-icon hi-icon-pencil">Edit</a>
					<a href="#" class="hi-icon hi-icon-link">Link</a>
					<a href="#" class="hi-icon hi-icon-mail">Mail</a>
					<a href="#" class="hi-icon hi-icon-location">Location</a>
				</div>
                <!--E 第九屏icon效果-->

            
		</div><!-- /container -->
		
	</body>
</html>